<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>防抖和节流封装</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .box {
            width: 300px;
            height: 200px;
            margin: 50px;
            font-size: 60px;
            color: #fff;
            text-align: center;
            line-height: 200px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="box box0">0</div>
    <div class="box box1">0</div>
    <div class="box box2">0</div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(".box0").on("mousemove", function (){
            this.innerText = ~~this.innerText + 1;
        })


        $(".box1").on("mousemove", debounceImmdiately(function (){
            $(".box1")[0].innerText = ~~$(".box1")[0].innerText + 1;
        }, 1000))

        $(".box2").on("mousemove", throttleDate(function (){
            $(".box2")[0].innerText = ~~$(".box2")[0].innerText + 1;
        }, 1000))

        // $(".box2").on("mousemove", throttle(function (){
        //     $(".box2")[0].innerText = ~~$(".box2")[0].innerText + 1;
        // }, 1000))

        // 防抖  debounce：定义隔一段时间触发一次函数，如果在等待时间内触发了函数，忽略函数执行，重新计时
        function debounce(func, wait){
            // 使用闭包
            var timer = null;
            return function (){
                if(timer){
                    clearTimeout(timer);
                }
                timer = setTimeout(function (){
                    func();
                    timer = null;
                }, wait);
            }
        }

        // 立即执行版
        function debounceImmdiately(func, wait){
            // 使用闭包
            var timer = null;
            return function (){
                if(timer){
                    clearTimeout(timer);
                }else{
                    func();
                }
                timer = setTimeout(function (){
                    
                    timer = null;
                }, wait);
            }
        }
    
        // 节流  throttle：定义每隔一段时间触发一次函数，如果在等待时间内触发，忽略
        function throttle(func, wait){
            var timer = null;
            return function (){
                if(!timer){
                    // func(); // immdiately
                    timer = setTimeout(function (){
                        func();
                        timer = null;
                    }, wait);
                }
            }
        }

        function throttleDate(func, wait){
            var startTime = Date.now();
            return function (){
                var now = Date.now();
                if(now - startTime > wait){
                    func();
                    startTime = now;
                }
            }
        }

        // 常用于：mousemove / scroll / input 等事件
        
    </script>
</body>
</html>